<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import gsap from 'gsap'

	const list = [{
			msg: 'Bruce Lee'
		},
		{
			msg: 'Jackie Chan'
		},
		{
			msg: 'Chuck Norris'
		},
		{
			msg: 'Jet Li'
		},
		{
			msg: 'Kung Fury'
		}
	]

	const query = ref('')

	const computedList = computed(() => {
		return list.filter((item) => item.msg.toLowerCase().includes(query.value))
	})

	function onBeforeEnter(el) {
		el.style.opacity = 0
		el.style.height = 0
	}

	function onEnter(el, done) {
		gsap.to(el, {
			opacity: 1,
			height: '1.6em',
			delay: el.dataset.index * 0.15,
			onComplete: done
		})
	}

	function onLeave(el, done) {
		gsap.to(el, {
			opacity: 0,
			height: 0,
			delay: el.dataset.index * 0.15,
			onComplete: done
		})
	}
</script>

<template>
	<input v-model="query" />
	<TransitionGroup tag="ul" :css="false" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
		<li v-for="(item, index) in computedList" :key="item.msg" :data-index="index">
			{{ item.msg }}
		</li>
	</TransitionGroup>
</template>